<template>
  <el-drawer
    :title="title"
    :visible.sync="visible"
    :size="size"
    :before-close="modelClose"
    :wrapper-closable="false"
  >
    <div class="box-top">
      <div class="headPhoto">
        <img src="@/assets/img/emptyDevice.png">
      </div>
      <div class="titleInfo">
        <div class="name">手动护理床</div>
        <div>FHCL202212210001</div>
      </div>
    </div>
    <div class="box-bottom">
      <simpleInfoCard title="基本信息">
        <template slot="contents">
          <div class="contents">
            <el-row>
              <el-col :span="12" class="col">
                <div class="label">产品名称：</div>
                <div class="value">12420104707178080G</div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="label">产品编号：</div>
                <div class="value">正常营业</div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24" class="col">
                <div class="label">规格型号：</div>
                <div class="value">硚口区,硚口区,硚口区,硚口区,硚口区,硚口区,硚口区,硚口区,硚口区,硚口区,硚口区,硚口区,硚口区</div>
              </el-col>
            </el-row>
          </div>
        </template>
      </simpleInfoCard>
    </div>
  </el-drawer>
</template>

<script>
import simpleInfoCard from '@/components/xm/simpleInfoCard'
export default {
  components: {
    simpleInfoCard
  },
  props: {},
  data() {
    return {
      model: {},
      title: '',
      size: '50%',
      visible: false
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    show(rowData) {
      this.visible = true
      this.model = JSON.parse(JSON.stringify(rowData))
    },
    modelClose() {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-drawer__body {
  overflow: auto;
  padding: 24px;
  .box-top{
    display: flex;
    justify-content: flex-start;
    padding: 0 0 10px;
    border-bottom: 1px #dcdfe6 solid;
    .headPhoto{
      border-radius: 50%;
      img{
        width: 75px;
        height: 75px
      }
    }
    .titleInfo{
      margin: 0 20px;
      color: #333;
      .name{
        font-weight: 700;
        font-size: 20px;
        padding: 10px 0 16px;
      }
    }
  }
  .box-bottom{
    margin-top: 16px;
    .contents{
      .col{
        display: flex;
        justify-content: flex-start;
        margin-bottom: 16px;
        .label{
          text-align: right;
          color: #666;
          min-width: 80px;
        }
        .value{
          flex: 1;
          margin-left: 5px;
          color: #333;
        }
      }
    }
  }
}
</style>
